/**
 * 出生日期选择器组件
 * 功能：从底部弹出的年月选择器，支持滚动选择
 */
Component({
  /**
   * 组件属性
   */
  properties: {
    // 是否显示选择器
    show: {
      type: Boolean,
      value: false
    },
    // 默认年份
    defaultYear: {
      type: Number,
      value: new Date().getFullYear()
    },
    // 默认月份
    defaultMonth: {
      type: Number,
      value: new Date().getMonth() + 1
    },
    // 默认日期
    defaultDay: {
      type: Number,
      value: new Date().getDate()
    }
  },

  /**
   * 组件数据
   */
  data: {
    // 年份列表
    years: [],
    // 月份列表
    months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
    // 日期列表
    days: [],
    // 当前选中的年份索引
    selectedYearIndex: 0,
    // 当前选中的月份索引
    selectedMonthIndex: 0,
    // 当前选中的日期索引
    selectedDayIndex: 0,
    // 动画相关
    maskVisible: false,
    contentVisible: false
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      this.initYears()
      this.initDays()
      this.setDefaultSelection()
    }
  },

  /**
   * 属性监听器
   */
  observers: {
    'show': function(show) {
      if (show) {
        this.showPicker()
      } else {
        this.hidePicker()
      }
    }
  },

  /**
   * 组件方法
   */
  methods: {
    /**
     * 初始化年份列表
     */
    initYears() {
      const currentYear = new Date().getFullYear()
      const years = []
      
      // 生成年份列表：当前年份往前20年到当前年份
      for (let i = currentYear - 20; i <= currentYear; i++) {
        years.push(i.toString())
      }
      
      this.setData({
        years: years
      })
    },

    /**
     * 初始化日期列表
     */
    initDays() {
      const currentYear = new Date().getFullYear()
      const currentMonth = new Date().getMonth() + 1
      this.updateDays(currentYear, currentMonth)
    },

    /**
     * 更新日期列表
     */
    updateDays(year, month) {
      const daysInMonth = new Date(year, month, 0).getDate()
      const days = []
      
      for (let i = 1; i <= daysInMonth; i++) {
        days.push(i.toString().padStart(2, '0'))
      }
      
      this.setData({
        days: days
      })
    },

    /**
     * 设置默认选择
     */
    setDefaultSelection() {
      const { defaultYear, defaultMonth, defaultDay } = this.properties
      const { years, months, days } = this.data
      
      // 查找默认年份的索引
      const yearIndex = years.findIndex(year => parseInt(year) === defaultYear)
      const selectedYearIndex = yearIndex >= 0 ? yearIndex : years.length - 1 // 默认选择最新年份
      
      // 查找默认月份的索引
      const monthIndex = defaultMonth - 1
      const selectedMonthIndex = monthIndex >= 0 && monthIndex < 12 ? monthIndex : new Date().getMonth()
      
      // 查找默认日期的索引
      const dayIndex = defaultDay - 1
      const selectedDayIndex = dayIndex >= 0 && dayIndex < days.length ? dayIndex : new Date().getDate() - 1
      
      this.setData({
        selectedYearIndex: selectedYearIndex,
        selectedMonthIndex: selectedMonthIndex,
        selectedDayIndex: selectedDayIndex
      })
    },

    /**
     * 显示选择器
     */
    showPicker() {
      this.setData({
        maskVisible: true
      })
      
      // 延迟显示内容，实现动画效果
      setTimeout(() => {
        this.setData({
          contentVisible: true
        })
      }, 50)
    },

    /**
     * 隐藏选择器
     */
    hidePicker() {
      this.setData({
        contentVisible: false
      })
      
      // 延迟隐藏遮罩，等待动画完成
      setTimeout(() => {
        this.setData({
          maskVisible: false
        })
      }, 300)
    },

    /**
     * 年份选择变化
     */
    onYearChange(e) {
      const selectedYearIndex = e.detail.value
      const { years, months, selectedMonthIndex } = this.data
      const selectedYear = parseInt(years[selectedYearIndex])
      const selectedMonth = parseInt(months[selectedMonthIndex])
      
      console.log('年份选择变化', selectedYearIndex, selectedYear)
      
      // 更新日期列表
      this.updateDays(selectedYear, selectedMonth)
      
      this.setData({
        selectedYearIndex: selectedYearIndex
      })
    },

    /**
     * 月份选择变化
     */
    onMonthChange(e) {
      const selectedMonthIndex = e.detail.value
      const { years, months, selectedYearIndex } = this.data
      const selectedYear = parseInt(years[selectedYearIndex])
      const selectedMonth = parseInt(months[selectedMonthIndex])
      
      console.log('月份选择变化', selectedMonthIndex, selectedMonth)
      
      // 更新日期列表
      this.updateDays(selectedYear, selectedMonth)
      
      this.setData({
        selectedMonthIndex: selectedMonthIndex
      })
    },

    /**
     * 日期选择变化
     */
    onDayChange(e) {
      const selectedDayIndex = e.detail.value
      console.log('日期选择变化', selectedDayIndex)
      
      this.setData({
        selectedDayIndex: selectedDayIndex
      })
    },

    /**
     * 点击遮罩取消
     */
    onMaskTap() {
      this.onCancel()
    },

    /**
     * 阻止事件冒泡
     */
    onContentTap() {
      // 阻止事件冒泡到遮罩
    },

    /**
     * 取消选择
     */
    onCancel() {
      console.log('取消选择出生日期')
      this.hidePicker()
      this.triggerEvent('cancel')
    },

    /**
     * 确认选择
     */
    onConfirm() {
      const { years, months, days, selectedYearIndex, selectedMonthIndex, selectedDayIndex } = this.data
      const selectedYear = parseInt(years[selectedYearIndex])
      const selectedMonth = parseInt(months[selectedMonthIndex])
      const selectedDay = parseInt(days[selectedDayIndex])
      
      console.log('确认选择出生日期', { year: selectedYear, month: selectedMonth, day: selectedDay })
      
      this.hidePicker()
      this.triggerEvent('confirm', {
        year: selectedYear,
        month: selectedMonth,
        day: selectedDay
      })
    }
  }
})
